<template>
  <div class="modal" :class="{'defined_modal': modal}" @click="close">
    <div class="modal-dialog" v-if="default_dialog">
      <div class="close"><i class="iconfont icon-shanchu color_gray" @click="close"></i></div>
      <slot></slot>
    </div>
    <slot v-else></slot>
  </div>
</template>

<script>
export default {
  data: () => ({}),
  props: {
    modal: {
      type: Boolean,
      default: false
    },
    default_dialog: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    close() {
      this.$emit('close_modal')
    }
  },
  beforeCreate() {
//  document.body.style.height = 'auto'
  },
  beforeDestroy() {
//  document.body.style.height = '100%'
  }
}
</script>

<style lang="scss" scoped>
.modal {
  background-color: rgba(0,0,0, 0.7);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
}
.modal-dialog {
  background-color: #fff;
  width: 80%;
  margin: auto;
  border-radius: 3px;
  padding: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
</style>
